import React, { FC } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout } from 'antd'
const { Header, Footer, Content } = Layout
import Logo from '../components/Logo/Logo'
import style from './MainLayout.module.scss'
import UserInfo from '../components/UserInfo/UserInfo'
import useLoadUserData from '../hooks/useLoadUserData'
import useNavPage from '../hooks/useNavPage'
const MainLayout: FC = () => {
  const { waitingUserData } = useLoadUserData()
  useNavPage(waitingUserData)
  return (
    <div>
      <Layout>
        <Header className={style.header}>
          <div className={style.left}>
            <Logo />
          </div>
          <div className={style.right}>
            <UserInfo></UserInfo>
          </div>
        </Header>
        <Content className={style.main}>
          <Outlet />
        </Content>
        <Footer className={style.footer}>
          大型问卷调查 &copy:2023-10-10 -present created by Harry
        </Footer>
      </Layout>
    </div>
  )
}
export default MainLayout
